/**
 * 具体而言，高阶组件是参数为组件，返回值为新组件的函数。
 *  高阶函数：参数可以是函数，返回值也可以是函数
 *  高阶组件是个函数：参数为组件(函数)，返回值为新组件(函数)
 */

const HocHeader = withAuthor(Header)

export default function App() {
  return (
    <div>
      <h1>Hello React TS</h1>
      <Header msg={'普通组件'} />
      <HocHeader msg={'高阶组件'} />
      <Footer />
    </div>
  )
}

// 参数为组件(函数)
function withAuthor(Com) {
  // 回值为新组件(函数)
  return function HOC(props) {
    // 中间这里可以做加工处理
    return <Com author={'前端67期出品'} {...props} />
  }
}

function Header(props) {
  console.log(props)
  return <div>头部组件</div>
}

function Footer() {
  return <div>底部组件</div>
}
